<template>
  <div class="myContainer">
    <!-- 头部标题 start -->  
    <el-row class="myHeadeTitle">
      <el-col :span="10">
        报事统计分析
      </el-col>
    </el-row>
    <!-- 头部标题 end -->
    <el-row class="myBorder">
      <el-row>
        <el-col :span="24" class="myBorderBottom">
          实时统计数据
        </el-col>
      </el-row>
      <el-row class="myPadding_10px">
        <el-col :span="2" class="myBorderRight_1px">
          <div class="myBox">
            <div class="myLeft">78</div>
            <div class="myRight">
              <div class="myTop">个</div>
              <div class="myBottom">正在进行</div>
            </div>
          </div>
        </el-col>
        <el-col :span="2" class="myBorderRight_1px">
          <div class="myBox">
            <div class="myLeft">12</div>
            <div class="myRight">
              <div class="myTop">个</div>
              <div class="myBottom">已完成</div>
            </div>
          </div>
        </el-col>
        <el-col :span="2" class="myBorderRight_1px">
          <div class="myBox">
            <div class="myLeft myColorRed">10</div>
            <div class="myRight">
              <div class="myTop">次</div>
              <div class="myBottom">整改</div>
            </div>
          </div>
        </el-col>
        <el-col :span="2" class="myBorderRight_1px">
          <div class="myBox">
            <div class="myLeft myColorRed">10</div>
            <div class="myRight">
              <div class="myTop">次</div>
              <div class="myBottom">逾期</div>
            </div>
          </div>
        </el-col>
        <el-col :span="2" class="myBorderRight_1px">
          <div class="myBox">
            <div class="myLeft">90</div>
            <div class="myRight">
              <div class="myTop">个</div>
              <div class="myBottom">总工单数</div>
            </div>
          </div>
        </el-col>
        <el-col :span="3" class="myBorderRight_1px">
          <div class="myBox">
            <div class="myLeft">86%</div>
            <div class="myRight">
              <div class="myTop"></div>
              <div class="myBottom">完成率</div>
            </div>
          </div>
        </el-col>
        <el-col :span="3" class="myBorderRight_1px">
          <div class="myBox">
            <div class="myLeft">95%</div>
            <div class="myRight">
              <div class="myTop"></div>
              <div class="myBottom">及时率</div>
            </div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="myBox">
            <div class="myLeft">11%</div>
            <div class="myRight">
              <div class="myTop"></div>
              <div class="myBottom">整改率</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-row>
    <el-row class="myBorder">
      <el-row>
        <el-col :span="24" class="myBorderBottom">
          当月统计数据
        </el-col>
      </el-row>
      <el-row class="myPadding_10px">
        <el-col :span="2" class="myBorderRight_1px">
          <div class="myBox">
            <div class="myLeft">78</div>
            <div class="myRight">
              <div class="myTop">个</div>
              <div class="myBottom">正在进行</div>
            </div>
          </div>
        </el-col>
        <el-col :span="2" class="myBorderRight_1px">
          <div class="myBox">
            <div class="myLeft">12</div>
            <div class="myRight">
              <div class="myTop">个</div>
              <div class="myBottom">已完成</div>
            </div>
          </div>
        </el-col>
        <el-col :span="2" class="myBorderRight_1px">
          <div class="myBox">
            <div class="myLeft myColorRed">10</div>
            <div class="myRight">
              <div class="myTop">次</div>
              <div class="myBottom">整改</div>
            </div>
          </div>
        </el-col>
        <el-col :span="2" class="myBorderRight_1px">
          <div class="myBox">
            <div class="myLeft myColorRed">10</div>
            <div class="myRight">
              <div class="myTop">次</div>
              <div class="myBottom">逾期</div>
            </div>
          </div>
        </el-col>
        <el-col :span="2">
          <div class="myBox">
            <div class="myLeft">90</div>
            <div class="myRight">
              <div class="myTop">个</div>
              <div class="myBottom">总工单数</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-row>
    <el-row class="myHeadeTitle myTitle">
      <el-col :span="10" class="myLineHeight_35px">
        历史纪录 列表 图表
      </el-col>
      <el-col :span="14" class="myTextAlignRight">
        <el-button type="primary" class="myBgGreen">导出</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="6">
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-col>
      <el-col :span="6">
        <el-button class="myBgGreen" @click="onSearchKW">查询</el-button>
      </el-col>
    </el-row>
    <el-row class="myPaddingTop_10px">
      <el-col :span="24">
        <template>
          <el-table
            :data="tableDataList"
            border
            @selection-change="handleSelectionChange"
            style="width: 100%">
            <el-table-column
              type="selection"
              width="100">
            </el-table-column>
            <el-table-column
              type="index"
              label="序号"
              width="100">
            </el-table-column>
            <el-table-column
              prop="id"
              label="月份">
            </el-table-column>
            <el-table-column
              prop="id"
              label="工单数量">
            </el-table-column>
            <el-table-column
              prop="id"
              label="完成数">
            </el-table-column>
            <el-table-column
              prop="id"
              label="逾期数">
            </el-table-column>
            <el-table-column
              prop="id"
              label="整改数">
            </el-table-column>
            <el-table-column
              prop="id"
              label="完成率">
            </el-table-column>
            <el-table-column
              prop="id"
              label="及时率">
            </el-table-column>
            <el-table-column
              prop="id"
              label="整改率">
            </el-table-column>
            <el-table-column
              width="100"
              label="操作">
              <template scope="scope">
                <el-button class="look" type="text" size="small" @click="onDetailed">详情</el-button> 
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-col>
    </el-row>
    <!-- 分页控件 start -->
    <div class="block">                    
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page_num"
        :page-sizes="[10, 15]"
        :page-size="page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!-- 分页控件 end -->
  </div>
</template>  

<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myHeadeTitle{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dbdbdb;
    margin-bottom:10px;
  }
  .myHeadeTitle:before,.myHeadeTitle:after{
    content: " ";
    display: block;
    clear: both;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top: 2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myBorder{
    border:1px solid #dcdcdc;
    margin-bottom: 10px;
  }
  .myBorderBottom{
    border-bottom:1px solid #dcdcdc;
    border-left: 5px solid #00c2a9;
    height: 30px;
    line-height: 30px;
    padding-left: 5px;
  }
  .myPadding_10px{
    padding: 10px;
  }
  .myBorderRight_1px{
    border-right:1px solid #dcdcdc;
  }
  .myBox{
    display: flex;
  }
  .myLeft{
    flex: 2;
    vertical-align: middle;
  }
  .myRight{
    flex: 3;
    vertical-align: middle;
  }
  .myLeft{
    text-align: right;
    font-size: 25px;
    padding-top: 6px;
    padding-right: 5px;
    font-weight: 500;
    color: #00c2a9;
  }
  .myRight{
    padding-top: 5px;
  }
  .myTop{
    height: 18px;
  }
  .myColorRed{
    color: #f30;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myLineHeight_35px{
    line-height:45px;
  }
  .myTitle{
    height: 45px;
  }
  .myPaddingTop_10px{
    padding-top: 10px;
  }
</style>

<script>
  
  export default {
     data(){
      return{
        modelOptions:[],
        modelValue:"",
        tableDataList:[],
        kw:"",
        page_size:10,
        page_num:1,
        total:null,
        value1:""
      }
    },
    components: {
        
    },
   
    mounted(){
      document.title = '报事统计分析';
      
      
     
    },
    methods:{
      handleSelectionChange:function(){

      },
      onSearchKW:function(){

      },
      handleSizeChange(val) {//每页条数控制
        this.page_size = val;
      },
      handleCurrentChange(val) {//每页
        this.page_num = val;
      },
      onDetailed:function(){
        
      }
    }

  }

</script>  



